<template>
	<view 
		class="professionalAnalysis"
		:style="{backgroundImage:'url(' + data.backgroundImage + ')'}"
	>
		<!-- 内容区 -->
		<view class="proCon">
			<!-- 内容区-上面 -->
			<view class="proConTop">
				<!-- <text>计算机科学与技术</text> -->
				<text>{{data.item3}}</text>
				<text>{{data.item1}}-{{data.item2}}-{{data.item3}}</text>
			</view>
			
			<!-- 内容区-下面（白背景部分） -->
			<view class="proConBottom">
				
				<!-- 专业介绍 -->
				<view class="proConBottomTitle">
					<!-- 图标 和 标题 -->
					<view class="proConBottomTitleCon">
						<image src="/static/professional/professionalIcon1.png" mode="aspectFit"></image>
						<text>专业介绍</text>
					</view>
					<!-- 内容 -->
					<view class="proConBottomCon">{{data.con1}}</view>
				</view>
				
				<!-- 就业方向 -->
				<view class="proConBottomTitle">
					<!-- 图标 和 标题 -->
					<view class="proConBottomTitleCon">
						<image src="/static/professional/professionalIcon2.png" mode="aspectFit"></image>
						<text>就业方向</text>
					</view>
					<!-- 内容 -->
					<view class="proConBottomCon">{{data.con2}}</view>
				</view>
				
				<!-- 就业占比 -->
				<view class="proConBottomTitle">
					<!-- 图标 和 标题 -->
					<view class="proConBottomTitleCon">
						<image src="/static/professional/professionalIcon3.png" mode="aspectFit"></image>
						<text>就业占比</text>
					</view>
					
					<!-- 进度条区域 -->
					<view class="myProgress">
						<view
							v-for="(item,index) in data.percentList"
							:key="index"
							class="myProgressItem">
							<!-- 进度条-上 -->
							<view class="myProgressItemTop">
								<text>{{item.name}}</text>
								<text>{{item.percent}}%</text>
							</view>
							
							<!-- 进度条-下 -->
							<view class="myProgressItemBottom">
								<view class="progress-container">
								    <view class="progress-bar" :style="{width: item.percent + '%'}"></view>
								</view>
							</view>	
						</view>
					</view>
				</view>	
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue";
	
	const ipt_content = ref("");
	const data = ref({
		backgroundImage:'/static/professional/professionalBg.png',
		item1:'工学',
		item2:'计算机类',
		item3:'计算机科学与技术',
		con1:'计算机科学与技术(Computer)',
		con2:'本专业学生毕业后可在软件企业、国家机关以及各个大、中型企、事业单位的信息技术部门、教育部门等单位从事软件工程领域的技术开发、教学、科研及管理等工作。该专业短期内社会需求仍然很大，就业市场前景广阔，随着计算机毕业生的增多，就业竞争将更为激烈，用人单位对毕业生选择余地的增加，导致对毕业生的要求越来越高。该专业适合升学考研。',
		percentList:[
			{
				id:1,
				name:'客服支持',
				percent:'12'
			},
			{
				id:2,
				name:'后端开发',
				percent:'12'
			},
			{
				id:3,
				name:'销售人员',
				percent:'12'
			},
			{
				id:4,
				name:'金融/证券/期货',
				percent:'6'
			},
			{
				id:5,
				name:'电子/电器/仪器仪表',
				percent:'5'
			},
			{
				id:6,
				name:'行政/后勤',
				percent:'4'
			},
			{
				id:7,
				name:'测试',
				percent:'4'
			},
			{
				id:8,
				name:'工程/机械/能源',
				percent:'3'
			},
			{
				id:9,
				name:'人力资源',
				percent:'3'
			},
			{
				id:10,
				name:'前端开发',
				percent:'3'
			},
			{
				id:11,
				name:'其他',
				percent:'36'
			},
		]
	
	})
	
	// 进度条
	// 定义props（如果需要从父组件接收进度值）
	// const props = defineProps({
	//   initialProgress: {
	//     type: Number,
	//     default: 30
	//   }
	// })
	
	const progress = ref<number>(12) // 初始进度12%
	
	// 更新进度的方法
	const updateProgress = (newValue: number) => {
	  progress.value = Math.min(100, Math.max(0, newValue))
	}
	
	// 如果需要暴露方法给父组件
	// defineExpose({
	//   updateProgress
	// })
</script>

<style scoped>
/* 设置背景图的 */
.professionalAnalysis {
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	padding-bottom: 70rpx;
}
/* 内容区  */
.proCon{
	width: 100%;
	padding: 30rpx;
}
/* 内容区-上面 */
.proConTop {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding-left: 15rpx;
	padding-bottom: 50rpx;
	color: #1e6cad;
}
/* 第1行文字 */
.proConTop text:nth-child(1) {
	font-size:58rpx;
	margin-bottom: 20rpx;
	font-weight: bold;
}
/* 第2行文字 */
.proConTop text:nth-child(2) {
	font-size:26rpx;
}

/* 内容区-下面 */
.proConBottom {
	width: 100%;
	background: #fff;
	border-radius: 26rpx;
	padding-right: 20rpx;
}

/* 专业介绍 */
.proConBottomTitle {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 20rpx;
}
/* 内容区 */
.proConBottomTitleCon {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-bottom: 30rpx;
}
/* 图片 */
.proConBottomTitleCon image {
	width: 12%;
	height: 50rpx;
	margin-right: 10rpx;
}
/* 文字 */
.proConBottomTitleCon text {
	font-size:34rpx ;
}
.proConBottomCon {
	color: #88919a;
	padding-left: 18rpx;
	font-size: 26rpx;
	line-height: 40rpx;
	text-align: justify;
}

/* 进度条 */
/* 进度条-每一项 */
.myProgressItem {
	padding: 0 20rpx;
	margin-bottom: 30rpx;
}
/* 进度条-每一项-上 */
.myProgressItemTop{
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	font-size: 26rpx;
	margin-bottom: 30rpx;
}
.myProgressItemTop text:nth-child(2) {
	color: #2c8cfe;
}

/* 进度条本身-样式 */
.progress-container {
  width: 100%;
  height: 8rpx;
  background-color: #EBEBEB;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #2c8cfe;
  border-radius: 10px;
  transition: width 0.3s ease;
}

</style>
